<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/backs/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/backs/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/backs/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/backs/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/backs/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/backs/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="/backs/static/h-ui.admin/css/style.css"/>
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
    <!--[if IE 6]>
    <script type="text/javascript" src="/backs/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>添加会员</title>
    <meta name="keywords" content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<article class="page-container">
    <form action="/vip/vipadd" method="post" class="form form-horizontal" id="form-member-add" enctype="multipart/form-data">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text vip_name" placeholder="会员名称" id="username" name="vip_name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input type="radio" id="sex-1" name="vip_sex" class="vip_sex" value="1">
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" name="vip_sex" class="vip_sex" value="0">
                    <label for="sex-2">女</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-3" name="vip_sex" class="vip_sex" value="2">
                    <label for="sex-3">保密</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text vip_tel" placeholder="手机号" id="mobile" name="vip_tel">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="email" class="input-text vip_email" placeholder="@邮箱" name="vip_email" id="email">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">所在城市：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text vip_city" placeholder="城市，例：中国·北京·海淀" name="vip_city" id="email">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="vip_area" cols="" rows="" class="textarea vip_area" placeholder="说点什么...最少输入10个字符"></textarea>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input type="submit" class="btn btn-primary radius" value="提交">
            </div>
        </div>
    </form>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/backs/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/backs/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/backs/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/backs/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/backs/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/backs/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/backs/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/backs/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
    $(function () {
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form-member-add").validate({
            rules: {
                vip_name: {
                    required: true,
                    minlength: 2,
                    maxlength: 16
                },
                vip_sex: {
                    required: true,
                },
                vip_tel: {
                    required: true,
                    isMobile: true,
                },
                vip_email: {
                    required: true,
                    email: true,
                },
                vip_city: {
                    required: true,
                },
                vip_img: {
                    required: true,
                },
            },
            onkeyup: false,
            focusCleanup: true,
            success: "valid",
            submitHandler: function (form) {
                var vip_name = $('.vip_name').val();
                var vip_sex = '';
                $('.vip_sex').each(function () {
                    if ($(this).prop('checked')) {
                        vip_sex =$(this).val()
                    }
                });
                var vip_tel = $('.vip_tel').val();
                var vip_email = $('.vip_email').val();
                var vip_img = $('.vip_img').val();
                var vip_city = $('.vip_city').val();
                var vip_area = $('.vip_area').val();
                $.post('/vip/vipadd',{vip_name:vip_name,
                    vip_sex:vip_sex, vip_tel:vip_tel,
                    vip_email:vip_email, vip_img:vip_img,
                    vip_city:vip_city, vip_area:vip_area,
                },function (data) {
                    if(data==1){
                        layer.msg('添加会员成功!',{icon: 6,time:1000});
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }
                })
            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>